<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getNews">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="cultrue" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="详情">
                            <span>{{ scope.row.cultureSummary }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="cultureName" label="推荐名称"sortable>
                <template slot-scope="scope">
                    <span style="cursor: pointer;color:#20a0ff;font-weight: bold" @click="handleEdit(scope.$index, scope.row)">{{scope.row.cultureName}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="cultrueDate" label="日期" sortable>
            </el-table-column>
            <el-table-column prop="cultureAddress" label="地址" sortable>
            </el-table-column>
            <el-table-column prop="cultrueVideo" label="图片">
                <template slot-scope="scope">
                    <img :src="scope.row.cultrueVideo" style="width: 100px;height: 40px;">
                </template>
            </el-table-column>
            <el-table-column prop="cultrueLikes" label="收藏数"  sortable>
                <template slot-scope="scope">
                    <i class="fa fa-heart" style="font-size:16px;color:red"></i>
                    {{scope.row.cultrueLikes}}
                </template>

            </el-table-column>
            <el-table-column prop="cultureAddress" label="是否热门" sortable>
                <template slot-scope="scope">
                    {{scope.row.cultrueHot == 1?"是":"否"}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template  slot-scope="scope">
                    <el-button size="small" @click="handleHot(scope.$index, scope.row,1)">置顶</el-button>
                    <el-button size="small" @click="handleHot(scope.$index, scope.row,0)">撤回</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--编辑界面-->
        <el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
            <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
                <el-form-item label="名称" prop="cultureName">
                    <el-input v-model="editForm.cultureName" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker
                            v-model="editForm.cultrueDate"
                            align="right"
                            type="date"
                            placeholder="选择日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="简介" prop="cultureSummary">
                    <el-input type="textarea" v-model="editForm.cultureSummary"  :rows="4"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="cultureAddress">
                    <el-input v-model="editForm.cultureAddress" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload
                            class="avatar-uploader"
                            action="api/upload/img"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="editForm.cultrueVideo" :src="editForm.cultrueVideo" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>

    </section>
</template>

<script>
    import util from '../../common/js/util'
    import {  getAllCultrue, deleteNewById, putUpdateCultrue} from '../../api/api';
    import axios from 'axios';
    export default {
        data() {
            return {
                filters: {
                    name: ''
                },
                cultrue: [],
                total: 0,
                page: 1,
                listLoading: false,
                sels: [],//列表选中列
                newsImg: "",
                editFormVisible: false,//编辑界面是否显示
                editLoading: false,
                editFormRules: {
                    cultureName: [
                        { required: true, message: '请输入热门名称', trigger: 'blur' }
                    ],
                    // cultrueDate: [
                    //     { required: true, message: '请输入日期', trigger: 'blur' }
                    // ],
                    cultureSummary: [
                        { required: true, message: '请输入简介', trigger: 'blur' }
                    ],
                    cultureAddress: [
                        { required: true, message: '请输入地址', trigger: 'blur' }
                    ]
                },
                //编辑界面数据
                editForm: {
                    id: 0,
                    name: '',
                    sex: -1,
                    age: 0,
                    birth: '',
                    addr: ''
                },
                // addFormVisible: false,//新增界面是否显示
                addLoading: false,
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            }
        },
        methods: {
            //性别显示转换
            formatSex: function (row, column) {
                return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
            },
            handleCurrentChange(val) {
                this.page = val;
                this.getNews();
            },
            handleAvatarSuccess(res, file) {
                // this.editForm.newsImg = file.url;
                let param = new FormData();
                param.append('img', file.raw);
                let config = {
                    headers: { 'Content-Type': 'multipart/form-data' }
                };
                axios.post("/api/upload/img",param,config).then(res => {
                    //console.log(res);
                    this.from.newsImg = 'api/'+res.data.body
                })
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //获取用户列表
            getNews() {
                let para = {
                    size: 10,
                    page: this.page,
                    name: this.filters.name,
                };
                this.listLoading = true;
                //NProgress.start();
                //console.log(para);
                getAllCultrue(para).then((res) => {
                    this.total = res.data.body.length;
                    this.cultrue = res.data.body;
                    this.listLoading = false;
                    //NProgress.done();
                });
            },
            //删除
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = Object.assign({}, row);
                    para.cultrueDelete = 1;
                    console.log(para);
                    putUpdateCultrue(para).then((res) => {
                        this.listLoading = false;
                        util.getMessage(res,this,"删除成功");
                        this.getNews();
                    });
                }).catch(() => {

                });
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
            },
            //编辑
            editSubmit: function () {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            let para = Object.assign({}, this.editForm);
                            para.cultrueDate= util.getCurrentTime(para.cultrueDate);
                            //console.log(para);
                            putUpdateCultrue(para).then((res) => {
                                this.editLoading = false;
                                //NProgress.done();
                                // this.$message({
                                //     message: '提交成功',
                                //     type: 'success'
                                // });
                                util.getMessage(res,this,"新闻修改成功");
                                this.$refs['editForm'].resetFields();
                                this.editFormVisible = false;
                                this.getNews();
                            });
                        });
                    }
                });
            },
            handleHot(index,row,num){
                let str = "";
                if(num == 1){
                    str = "置于热门成功"
                } if(num == 0){
                    str = "取消热门成功"
                }
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    //this.editLoading = true;
                    let para = Object.assign({}, row);
                    para.cultrueHot = num;
                    putUpdateCultrue(para).then((res) => {
                       // this.editLoading = false;
                        util.getMessage(res,this,str);
                        this.getNews();
                    });
                });
            },
            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function () {
                var ids = this.sels.map(item => item);
               // console.log(ids);
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    for(let id of  ids){
                        let para = Object.assign({}, id);
                        para.cultrueDelete = 1;
                        putUpdateCultrue(para).then((res) => {
                            util.getMessage(res,this,"删除成功");
                            this.getNews();
                        });
                    }
                    this.listLoading = false;
                }).catch(() => {

                });
            }
        },
        mounted() {
            this.getNews();
        }
    }

</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 300px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 300px;
        height: 178px;
        display: block;
    }
</style>